import Icon from '@/components/Icon'
import useInitState from '@/hooks/useInitState'
import { Popup, Tabs } from 'antd-mobile'

import styles from './index.module.scss'
import {
  getUserChannel,
  changeChannel,
  getAllChannel
} from '@/store/actions/home'
import { useDispatch } from 'react-redux'
import Channels from './components/Channels/Channels'
import { useState } from 'react'
import ArticleList from './components/ArticleList'
import { useHistory } from 'react-router-dom'
const Home = () => {
  const [visible, setVisible] = useState(false)
  const { userChannel, active } = useInitState(getUserChannel, 'home')
  useInitState(getAllChannel, 'home')
  const dispatch = useDispatch()
  const onChangeChannel = (key: string) => {
    dispatch(changeChannel(key))
  }
  const show = () => {
    setVisible(true)
  }
  const hide = () => {
    setVisible(false)
  }
  const history = useHistory()
  return (
    <div className={styles.root}>
      {/* 频道 Tabs 列表
        activeKey: 决定当前高亮的频道编号
       */}
        {/* key = {} */}
      <Tabs
        className="tabs"
        activeKey={active}
        activeLineMode="fixed"
        onChange={onChangeChannel}>
        {userChannel.map((it) => (
          <Tabs.Tab title={it.name} key={it.id}>
            {/* 在每个 Tabs.TabPane 中渲染文章列表组件 */}
            <ArticleList />
          </Tabs.Tab>
        ))}
      </Tabs>

      <div className="tabs-opration">
        <Icon type="iconbtn_search" onClick={() => { history.push('/search') }}/>
        <Icon type="iconbtn_channel" onClick={show} />
      </div>

      <Popup visible={visible} position="left">
        <Channels onChangeChannel={onChangeChannel} hide={hide} />
      </Popup>
    </div>
  )
}

export default Home
